<template>
    <input :value="modelValue" @input="numberInput" class="amount-input" :placeholder="placeholder" autocomplete="off" :disabled="disabled" />
</template>

<script setup>
const props = defineProps({
    modelValue: {
        type: Number,
        default: 0
    },
    placeholder: {
        type: String,
        default: ''
    },
    min: {
        type: Number,
        default: 0
    },
    max: {
        type: Number,
        default: 999999999999
    },
    point: {
        type: Number,
        default: 6
    },
    disabled: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['update:modelValue','input'])

const numberInput = (event) => {
   //  你可以在这里进一步处理，例如限制小数点后的位数
  const value = event.target.value;
  let checkPlan = '' + value
  checkPlan = checkPlan
      .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
      .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
      .replace(/^\./g, '') // 保证第一个为数字而不是.
      .replace('.', '$#$')
      .replace(/\./g, '')
      .replace('$#$', '.')
  if (checkPlan.indexOf('.') < 0 && checkPlan !== '') {
    // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
    checkPlan = parseFloat(checkPlan) + ''
  } else if (checkPlan.indexOf('.') >= 0) {
    if(Number(props.point) === 0) {
        checkPlan = checkPlan.replace(/[^1-9]/g, '') // 只能正整数
    }else {
        checkPlan = checkPlan
        .replace(/^()*(\d+)\.(\d\d\d\d\d\d).*$/, '$1$2.$3') // 只能输入6个小数
    }
  }

  if(checkPlan !== '') {
    if(checkPlan.indexOf('.') >= 0) {
        if(checkPlan.length >= 3) {
            if(parseFloat(checkPlan) > props.max) {
                checkPlan = props.max
            }else 
            if(parseFloat(checkPlan) < props.min) {
                checkPlan = props.min
            }
        }
    }else {
        if(parseFloat(checkPlan) > props.max) {
            checkPlan = props.max
        }else 
        if(parseFloat(checkPlan) < props.min) {
            checkPlan = props.min
        }
    }
  }
  if(!checkPlan) {
    checkPlan = 0;
  }
  event.target.value = checkPlan; // 直接修改视图中的值以保持格式一致
  emits('update:modelValue',parseFloat(checkPlan))
  emits('input',parseFloat(checkPlan))
}
</script>

<style lang="scss" scoped>
.amount-input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
}
</style>